<template>
	<view class="content">
		<view class="count"><text>{{current+1}}</text>/<text>{{list.length}}</text></view>
		<view class="swiper">
			<swiper class="swiper" @change="swiperChange">
				<swiper-item  v-for="(item,index) in list" :key="index" >
					
					<view class="swiper-item">
						<view class="question">
							<text class="question-type">[{{item.type}}]</text>
							<text class="question-title">{{item.title}}</text>
						</view>
							<radio-group class="answer-radio" name="radio">
								<view class="answer"  :style="{'background-color':answerItem.bgclass}" :class="{'answer-color':item.id+'-'+answerItem.id === question_answer_current}" v-for="(answerItem,answerIndex) in item.answer" :key="item.id+'-'+answerItem.id" @click="onclickAnswerView(item.id+'-'+answerItem.id)">
									<view class="answer_right"><text>{{answerItem.sort}} {{answerItem.content}} </text></view>
									<view class="answer_left"><radio color="#f07373" :value="answerItem.id" style="transform:scale(0.8)" :checked="item.id+'-'+answerItem.id === question_answer_current"></radio></view>
								</view>
							</radio-group>
						
					</view>
				</swiper-item>
				
			</swiper>
		</view>
		
		<view class="sub" @click="sub()">
			<button class="sub_but">提交</button>
		</view>
	</view>
</template>

<script>
	import unils from "../../unils/utils.js"
	export default {
		data() {
			return {
				'answerOk':0,//回答正确个数
				'answerNo':0,//未回答个数
				'answerErr':0,//回答错误个数
				'current':0,
				'question_answer_current':"",//当前选中问题的答案
				'category_id':0,
				"answerString":"",//答案
				"list":[
					// {
					// 	"type":"单选",
					// 	"title":"2021年第七次人口普查中国有多少人3",
					// 	"id":"5",
					// 	'ok_answer':"1",
					// 	'your_answer':"",
					// 	"answer":[
					// 		{
					// 			"sort":"A",
					// 			"content":"10亿",
					// 			"is_ok":"1",
					// 			"id":"1",
					// 			"bgclass":"#cccccc",
								
					// 		},{
					// 			"sort":"B",
					// 			"content":"11亿",
					// 			"is_ok":"1",
					// 			"id":"2",
					// 			"bgclass":"",
								
					// 		},{
					// 			"sort":"C",
					// 			"content":"12亿",
					// 			"is_ok":"1",
					// 			"id":"3",
					// 			"bgclass":"#cccccc",
								
					// 		},{
					// 			"sort":"D",
					// 			"content":"14亿",
					// 			"is_ok":"2",
					// 			"id":"4",
					// 			"bgclass":"",
								
					// 		}
						// ]
					// }
				]
			}
		},
		onLoad() {
			let that = this;
			try{
				const value = uni.getStorageSync('category_id');
				that.category_id = value;
				if(value){
					uni.request({
					    url: that.websiteUrl+'/question/'+value, 
					    success: (res) => {
							if(res.data.code != 1){
								uni.showToast({
									title:"网络错误！",
									duration:2000,
									icon:'none',
								})
							} else {
								if(res.data.data.length == 0){
									uni.showToast({
										title:"该科目下没有试题！",
										duration:2000,
										icon:"none"
									});
								} else {
									that.list = res.data.data;
								}
								
							}
					    }
					});
				} else {
					uni.showToast({
						title:"请选项科目！",
						duration:2000,
						icon:'none',
					});
					
				}
			} catch(e){
				
			}
			
		},
		methods: {
			//点击选中答案
			onclickAnswerView(index){
				// console.log('点击'+index);
				this.question_answer_current = index;
				// console.log(this.current);
				// console.log(this.list[this.current].your_answer);
				let indexArr = index.split('-');
				this.list[this.current].your_answer = indexArr[1];
				// console.log(this.list[this.current].your_answer);
				
			},
			//滑动选择下一题
			swiperChange(evt){
				this.current = evt.detail.current;
			},
			//真正提交服务器
			realSub(){
				let that = this;
				const openid = uni.getStorageSync('openid');
				if(unils.stringIsEmpty(openid)){
					uni.showToast({
						title:"请先登录！",
						duration:2000,
						icon:"none"
					})
					uni.navigateTo({
						url:"../login/login"
					})
					return;
				}
				if(unils.stringIsEmpty(that.category_id)){
					uni.showToast({
						title:"请先选择科目！",
						duration:2000,
						icon:"none"
					})
					return;
				}

				uni.request({
				    url: that.websiteUrl+'/addmyanswer/'+that.answerString+'/'+openid+'/'+that.category_id, 
				    data: {
				        text: 'uni.request'
				    },
					method:'POST',
				    header: {
				        'content-type': 'application/json' //自定义请求头信息
				    },
				    success: (res) => {

						if(res.data.code != 1){
							uni.showToast({
								title:"网络错误！",
								duration:2000,
								icon:'none',
							})
						} else {
							uni.navigateTo({
								url:"../../static/kaoshi3/kaoshi3?answerOk="+that.answerOk+"&answerErr="+that.answerErr+"&answerNo="+that.answerNo
							})
						}
				    }
				});
			},
			//点击提交按钮
			sub(){
				
				this.answerString = "";//避免多次提交数据重复累加
				this.answerNo = 0;//未回答问题数重置
				this.answerErr = 0; //回答错误数重置
				this.answerOk = 0;//回答正确数重置
				this.list.forEach((item,index)=>{
					let ansterStr = item.id+"_"+item.your_answer+"-";
					// console.log(ansterStr);
					this.answerString +=ansterStr;
					// this.listAnswer[item.id] = item.your_answer;
					if(item.your_answer == ''){
						this.answerNo ++;//未回答问题加一
					} else {
						if(item.your_answer == item.ok_answer){
							this.answerOk ++;
						} else {
							this.answerErr ++;
						}
					}
					
					
				})
				console.log(this.answerNo);
				console.log(this.answerOk);
				console.log(this.answerErr);
				// console.log(this.answerString);
				let that = this;
				if(this.answerNo != 0){
					uni.showModal({
						title: "提示",
						content: "您有未回答的问题，是否确认提交！",
						success:function(res){
							if(res.confirm){
								that.realSub();
								
							} else {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					that.realSub();
				}
			}
		}
	}
</script>

<style lang="scss">
.content{
	.count{
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		font-weight: bold;
	}
	.swiper{
		height:500px;
		.swiper-item{
			
			.question{
				padding: 10px;
				height: 40px;
				line-height: 40px;
				.question-type{
					font-size: 16px;
					font-weight: blod;
					color: #007AFF;
					margin-right: 10px;
				}
				.question-title{
					font-size: 15px;
				}
			}
			.answer-radio{
				// padding:10px;
				font-size: 13px;
				
				.answer{
					display: flex;
					height: 40px;
					line-height: 40px;
					padding-right: 10px;
					padding-left: 10px;
					// margin-bottom: 10px;
					.answer_left{
						flex-shrink: 0;
					}
					.answer_right{
						width: 100%;
					}
				}
				.bg{
					background-color: #cccccc;
				}
				.answer-color{
					color: #f07373;
				}
			}
		}
	}
	.sub{
		background-color: #f07373;
		position: fixed;
		bottom: 0px;
		width:100%;
		.sub_but{
			background-color: #f07373;
			color:#ffffff;
		}
	}
}
</style>
